<template>
  <div class="searchbardiv" style="width: 396px; height: 45px; color: #fff">
    <el-input
        placeholder="USS MIGUEL KEITH"
        v-model="inputval"
        class="input-with-select"
        style="border-top-right-radius: 0; border-bottom-right-radius: 0; height: 45px"
    >
    </el-input>
    <el-dropdown>
      <el-button style="margin: 0px; border-radius: 0; height: 45px" size="large">
        <svg
            t="1699599341575"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4182"
            width="20"
            height="20"
        >
          <path
              d="M704 627.2h-40.8l-14.4-14.4c50.4-58.4 80-133.6 80-216C728.8 212.8 580 64 396 64S64.8 213.6 64.8 396.8s148.8 332.8 332.8 332.8c82.4 0 158.4-30.4 216-80l14.4 14.4v40l256 255.2 76-76c-0.8 0-256-256-256-256z m-307.2 0c-127.2 0-230.4-103.2-230.4-230.4s103.2-230.4 230.4-230.4 230.4 103.2 230.4 230.4-103.2 230.4-230.4 230.4z"
              fill="#fff"
              fill-opacity=".65"
              p-id="4183"
          ></path>
        </svg>
      </el-button>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="openResultPannel('ship')">船舶搜索</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button
        style="
        margin: 0px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 45px;
      "
        @click="handlerReportClick"
        size="large"
    >
      <svg
          t="1701402154481"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4309"
          width="20"
          height="20"
      >
        <path
            d="M828.952381 146.285714a73.142857 73.142857 0 0 1 73.142857 73.142857v463.238096a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V219.428571a73.142857 73.142857 0 0 1 73.142857-73.142857h633.904762z m0 73.142857H195.047619v463.238096h633.904762V219.428571z m-96.792381 84.577524v195.047619h-73.142857v-70.070857l-136.362667 136.362667-86.186666-86.211048-137.947429 137.947429-51.712-51.736381 189.635048-189.635048 86.211047 86.186667 84.772572-84.772572h-70.290286v-73.142857h195.047619zM268.190476 804.571429h487.619048v73.142857H268.190476z"
            p-id="4310"
            fill="#fff"
            fill-opacity=".65"
        ></path>
      </svg>
    </el-button>
    <el-button
        style="
        margin: 0px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 45px;
      "
        @click="handlerDLClick"
        size="large"
    >
      <svg t="1714286398644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4287" width="20" height="20"><path d="M864 832h-704a32 32 0 0 0 0 64h704a32 32 0 0 0 0-64zM801.28 400.64H640V161.92A33.92 33.92 0 0 0 606.08 128h-192a33.92 33.92 0 0 0-30.08 33.92v238.72H222.72a30.08 30.08 0 0 0-21.76 51.84l289.28 289.92a32 32 0 0 0 43.52 0l289.28-289.92a30.08 30.08 0 0 0-21.76-51.84z" p-id="4288" fill="#fff"></path></svg>
    </el-button>
  </div>
</template>
<script setup>
import { Delete, Download, Search, ZoomIn } from "@element-plus/icons-vue";
import { useEarthStore } from '@/stores/earth'
import plot from "@/components/common/Earth/plot/plot.js";

import ais from './ais.json'

import { ref } from "vue";

import dayjs from "dayjs";

import html2canvas from "html2canvas";

const earthStore = useEarthStore();

let inputval = ref("USS MIGUEL KEITH");

let p;
setTimeout(() => {
  p = new plot(viewer);
}, 1000);

function handlerDLClick(params) {
  const geoJSONString = JSON.stringify(ais);
  // 创建 Blob 对象
  const blob = new Blob([geoJSONString], { type: 'application/json' });
  // 创建下载链接
  const url = window.URL.createObjectURL(blob);
  // 创建 <a> 标签并设置属性
  const link = document.createElement('a');
  link.href = url;
  link.download = 'ais.geojson'; // 设置文件名
  // 模拟点击下载
  link.click();
  // 释放资源
  window.URL.revokeObjectURL(url);
}

async function handlerReportClick(params) {
  // 打开报告面板
  // 打开截图和预览

  delete earthStore.pannellist["reportpannel"];
  setTimeout(() => {
    earthStore.pannellist["reportpannel"] = {
      name: "report-pannel",
      options: {
        layer: 0,
        searchBar: this,
        fileList: [],
        top: 123,
        left: 39,
      },
    };
  }, 0);

  // const htmlText = document.getElementById("main1");

  // const canvas = await html2canvas(htmlText, {
  //   useCORS: true, // 使用跨域
  // });
  // let img = canvas.toDataURL("image/png");

  // var link = document.createElement("a");
  // link.href = img;
  // link.download = dayjs(new Date()).format("YYYY-MM-DD/HH:mm:ss");
  // link.click();

  return;
  earth
      // .capture(10000,10000)
      .capture(earth.czm.viewer.canvas.width, earth.czm.viewer.canvas.height)
      .then((img) => {
        img = img.replace("image/png", "image/octet-stream");
        var link = document.createElement("a");
        link.href = img;
        link.download = dayjs(new Date()).format("YYYY-MM-DD/HH:mm:ss");
        link.click();
      })
      .catch((err) => {
        this.error = err.message;
      });
}

function handlerRectangleClick() {
  p.removeall();
  p.draw({
    type: "rectanglemark",
    c: async (e) => {
      console.log(e);
      //打开窗口
      let bbox = [
        e.wgs84pos[3]["lat"],
        e.wgs84pos[1]["lat"],
        e.wgs84pos[3]["lng"],
        e.wgs84pos[1]["lng"],
      ];

      delete earthStore.pannellist["warshipsearchresultpannel"];
      earthStore.pannellist["warshipsearchresultpannel"] = {
        name: "warshipsearchresult-pannel",
        options: {
          layer: 0,
          searchBar: this,
          fileList: [],
          top: 123,
          left: 39,
        },
      };
    },
    options: {
      clampToGround: true,
      classificationType: Cesium.ClassificationType.BOTH,
    },
  });
}

// openResultPannel('type');
function openResultPannel(type) {
  delete earthStore.pannellist["warshipsearchresultpannel"];
  setTimeout(() => {
    earthStore.pannellist["warshipsearchresultpannel"] = {
      name: "warshipsearchresult-pannel",
      options: {
        layer: 0,
        searchBar: this,
        type: type,
        imputval: inputval.value,
        fileList: [],
        top: 123,
        left: 39,
      },
    };
  }, 0);
}
</script>
<style lang="scss" scoped>
.input-with-select {
  :deep(.el-input__wrapper) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0;
  }
}
.searchbardiv {
  display: flex;
  background-color: rgb(44, 44, 44);
  border-radius: 3px;
}
</style>
